<template>
  <!-- 页面整体容器 -->
  <view class="container">
    <view class="status_bar">
      <!-- 这里是状态栏 -->

      <!-- 有趣页 -->
      <!-- 自定义导航栏 -->
      <uni-nav-bar
        :fixed="true"
        :statusBar="true"
        @clickRight="openAdd"
        class="head-area"
      >
        <!-- 左边 -->
        <block slot="left">
          <view class="nav-left">
            <view class="icon iconfont icon-qiandao"></view>
          </view>
        </block>
        <!-- 中间 -->
        <view class="nav-tab-bar u-f-asb serach-input" @tap="serachContainer">
          <input
            class="uni-input"
            disabled
            placeholder-class="icon iconfont icon-sousuo topic-search"
            placeholder="搜索趣事"
          />
        </view>
        <!-- 右边 -->
        <block slot="right">
          <view class="nav-right u-f-asb">
            <view class="icon iconfont icon-bianji1"></view>
          </view>
        </block>
      </uni-nav-bar>

      <!-- 顶部导航栏 组件已封装-->
      <topBar
        :tabBars="tabBars"
        :tabIndex="tabIndex"
        @topBar="topBar"
        :newspage="newspage"
        :linewidth="linewidth"
        :scroll="scroll"
      ></topBar>
    </view>
    <!-- 图文列表区域 -->
    <view
      class="uni-tab-bar"
      style="background: white; width: 100vw; height: 100vh"
    >
      <swiper
        class="swiper-box"
        :style="{ height: swiperHeight + 'px' }"
        :current="tabIndex"
        @change="tabChange"
      >
        <swiper-item v-for="(item, index) in newsList" :key="index">
          <scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
            <template v-if="item.list && item.list.length > 0">
              <block>
                <IndexList :list="item.list"></IndexList>
              </block>
              <loadMore :loadtext="item.loadtext"></loadMore>
            </template>
            <template v-else>
              <noThing></noThing>
            </template>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue";
import IndexList from "../../components/index/index-list.vue";
import topBar from "../../components/topbar/topbar.vue";
import loadMore from "../../components/common/load-more.vue";
import noThing from "../../components/common/no-thing.vue";
// import { statMixin } from "../../Mixin/loadmore.js";
export default {
  // mixins: [statMixin],
  components: {
    IndexList,
    topBar,
    loadMore,
    noThing,

    uniNavBar,
  },
  data() {
    return {
      // 顶部栏默认下标
      tabIndex: 0,
      // 主内容区域高度
      swiperHeight: 0,
      scroll: 0,
      // 视口宽度(width)
      scrollwidth: 360,
      fixedconfirm: true,
      linewidth: 38,
      newspage: true,
      // urlTopImg: "",
      // urlhead: "",
      tabBars: [],
      newsList: [
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
      ],
    };
  },
  onLoad() {
    // 获取分类
    this.getNav();
    // 获取对应分类列表
    this.getList();
    // 读取上一次的类别缓存页面
    this.tabBars = uni.getStorageSync("tabBars");
    this.topBar(0);
  },
  onShow() {
    this.tabIndex = uni.getStorageSync("tabIndex") - 1;
    this.getList();
    // setTimeout(() => {
    //   uni.removeStorage({ key: "tabIndex" }); // 清除缓存
    // }, 5000);
    // this.getPersonImgInfo();
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    // 上拉加载
    this.loadmore();
  },
  methods: {
    // 获取文章分类
    async getNav() {
      let [err, res] = await this.$http.get("/index/postclass");
      let list = res.data.list;
      let arr = [];
      for (let i = 0; i < list.length; i++) {
        arr.push({
          id: list[i].id,
          name: list[i].classname,
        });
      }
      this.tabBars = arr;
      uni.setStorageSync("tabBars", arr);
      // this.tabBars.length > 0 && this.getList();
    },
    // 顶部导航点击事件
    topBar(index) {
      this.tabIndex = index;
      this.getList();
    },
    // 图文列表滑动
    tabChange(e) {
      this.tabIndex = e.detail.current;
      this.getList();
    },
    openAdd() {
      this.User.navigate({
        // url: '../add-input/add-input?postclass='+JSON.stringify(this.tabBars),
        url: "../add-input/add-input",
      });
    },
    serachContainer() {
      uni.navigateTo({
        url: "../search/search",
      });
    },

    // 获取指定列表
    async getList() {
      let currentIndex = this.tabIndex;
      if (typeof this.newsList[this.tabIndex].page == "undefined") {
        this.newsList[this.tabIndex].page = 1;
      }

      let url = `/index/postclass/${this.tabIndex + 1}/post/${
        this.newsList[this.tabIndex].page
      }`;
      let [err, res] = await this.$http.get(url);
      let list = res.data.list.rows;
      let newItemList = [];
      for (let i = 0; i < list.length; i++) {
        newItemList.push(this.__format(list[i]));
      }
      // 对后端list进行格式化以便前端可以进行数据渲染
      this.newsList[currentIndex].list =
        this.newsList[currentIndex].page > 1
          ? this.newsList[currentIndex].list.concat(newItemList)
          : newItemList;
      this.newsList[currentIndex].firstload = true;
      console.log("QW", this.newsList);
    },

    // 格式转化
    __format(item) {
      if (item.supports.length == 0) {
        var infonum = {
          index: 0, //0:没有操作，1:顶,2:踩；
          dingnum: 0,
          cai: 0,
        };
      } else {
        let dingList = item.supports.filter((item) => item.type == 1);
        let caiList = item.supports.filter((item) => item.type == 2);
        var infonum = {
          index: item.supports[0].type, //0:没有操作，1:顶,2:踩；
          dingnum: dingList.length,
          cai: caiList.length,
        };
      }

      return {
        id: item.id,
        user_id: item.user_id,
        userpic:
         JSON.parse(item.user.userpic) || "https://s2.loli.net/2022/06/22/SmH6nbNi9PDaxYg.jpg",
        username: item.user.username,
        follow: 1, //关注表还没有建立，暂时写死，默认为为关注
        title: item.title,
        type: 0, // img:图文 -- 0, video:视频 -- 1   默认为图文
        titlepic: JSON.parse(item.titlepic),
        content: item.content,
        video: false,
        share: 0, //默认为未执行分享操作
        infonum: infonum,
        commentnum: 12, //评论统计总数默认为12
        create_time: item.create_time, //评论统计总数默认为12
      };
    },

    // getPersonImgInfo() {
    //   uni.request({
    //     url: "https://www.xiaohui.ac.cn/netdata/api/index/main",
    //     success: (res) => {
    //       this.urlhead = res.data.urlhead;
    //       this.urlTopImg = res.data.urlTopImg;
    //     },
    //   });
    // },
    // 上拉加载
    loadmore(index) {
      // if (
      //   !this.newsList[index] ||
      //   this.newsList[index].loadtext != "上拉加载更多"
      // ) {
      //   return;
      // }
      // 修改状态
      // this.newsList[index].loadtext = "加载中...";
      this.newsList[this.tabIndex].page++;
      this.getList();
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
}

/* #ifdef MP-WEIXIN */

.status_bar {
  margin-top: 40px;
}
/* #endif */

/* #ifdef H5 */
.status_bar {
  margin-top: 8px;
}
/* #endif */

.icon-qiandao {
  color: #ffab48;
}
.icon-bianji1 {
  position: relative;
  right: -4px;
}
.icon-qiandao,
.icon-bianji1 {
  font-size: 18px !important;
}
.search-input {
  padding: 4px 10px;
}
.uni-input {
  background: #f4f4f4;
  border-radius: 6px;
  height: 10px;
  text-align: center;
  line-height: 10px;
  width: 250px;
}
.topic-search {
  font-size: 12px;
}
.uni-tab-bar {
  margin-top: 30px;
}
</style>
